<template>
    <el-dialog
        title="自定义列表"
        :visible.sync="dialogVisible"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="handleClose">
        <div class="list-config">
            <div class="container left">
                <el-checkbox-group v-model="selectedList" @change="handleChange">
                    <el-checkbox
                        v-for="item in selectList"
                        :key="item.key"
                        :label="item.key">
                        {{ item.label }}
                     </el-checkbox>
                </el-checkbox-group>
            </div>
            <div class="container right">
                <div
                    v-for="(item, index) in resultList"
                    :key="item.key"
                    class="item">
                    <div>{{ item.label }}</div>
                    <div class="delete" @click="deleteLine(item)">删除</div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
                <mt-button @click="handleSubmit">确定</mt-button>
                <mt-button type="submain" @click="handleClose">取消</mt-button>
        </span>
    </el-dialog>
</template>
  
<script>
export default {
    name: "ListConfig",

    props: {
        type: {
            type: String,
            default: ""
        }
    },
  
    data () {
        return {
            selectedList: [],
            allList: [],
            dialogVisible: false,
            inputWidth: "calc(100% - 20px)"
        };
    },

    computed: {
        selectList () {
            return this.allList.filter(i => {
                return !i.selected;
            });
        },
        resultList () {
            const list = [];
            this.selectedList.forEach(item => {
                const matchItem = this.allList.find(i => {
                    return i.key === item;
                });
                list.push(matchItem);
            });
            return list;
        }
    },
  
    created () {
        this.getAllList();
    },
  
    mounted () {
    },
  
    methods: {
        /* 触发弹窗 */
        open () {
            this.dialogVisible = true;
        },

        /* 获取所有列表配置项 */
        async getAllList () {
            const params = { deviceNumber: SETTING.deviceNumber[this.type] };
            this.$request.post(this.API.GET_HEADING_LIST, params).then(res => {
                if (res.success) {
                    console.log("列表配置项:", res.data);
                    this.fixedList = res.data.fixedList;
                    this.deviceList = res.data.deviceList;
                    this.allList = res.data.fixedList.map(i => {
                        return { ...i, fixed: true };
                    });
                    this.deviceList.forEach(i => {
                        this.allList.push({
                            label: i.label,
                            key: i.key,
                            fixed: false
                        });
                    });
                }
            });
        },

        /* 选择某一行 */
        handleChange (list) {
            // console.log("item:", item);
        },
        /* 删除一行 */
        deleteLine (item) {
            if (item.fixed) {
                this.$mtMessage.error("固定字段无法删除");
                return;
            }
            else {
                const index = this._.findIndex(this.selectedList, i => {
                    return i === item.key;
                });
                console.log("index:", index);
                this.selectedList.splice(index, 1);
            }
            
        },
    
        /* 点击确定 */
        async handleSubmit () {
            const params = {};
            params.deviceNumber = SETTING.deviceNumber[this.type];
            params.list = this.resultList.map((i, index) => {
                return {
                    key: i.key,
                    label: i.label,
                    width: 180,
                    status: 1,
                    order: index
                };
            });
            this.$request.post(this.API.UPDATE_HEADING_LIST, params).then(res => {
                if (res.success) {
                    this.$mtMessage.success("保存成功");
                    this.$emit("submit", params.list);
                    this.handleClose();
                }
            });
        },
    
        /* 弹窗关闭 */
        handleClose () {
            this.dialogVisible = false;
        }
    }
};
</script>
  
<style lang="scss" scoped>
.list-config  {
    height: 500px;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    .container {
        border: 1px solid #dcdfe6;
        padding: 20px;
    }
    .left {
        width: 66%;
    }
    .right {
        width: 30%;
        .item {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            .delete {
                cursor: pointer;
                color: #409eff;
            }
        }
    }
}
</style>
<style lang="scss">
.list-config {
    .el-checkbox {
        margin-bottom: 10px;
    }
}
</style>
  